<template>
  <div class="organization">
    <div class="header" @click="openPopup">
      <div class="header-content">
        <div class="name">
          {{ departPeople.name || defaultPeople || name || "未选择" }}
        </div>
        <x-icon
          type="ios-arrow-right"
          fill="#fff"
          size="24"
          v-if="!show"
        ></x-icon>
        <x-icon
          type="ios-arrow-down"
          fill="#fff"
          size="24"
          v-if="show"
        ></x-icon>
        <!-- <span class="iconfont icon1" v-if="!show">&#xe669;</span>
                <span class="iconfont icon2" v-if="show">&#xe669;</span> -->
      </div>
    </div>
    <popup v-model="show" :show-mask="false" class="popup">
      <div class="main_wrapper" v-if="show">
        <div class="search">
          <x-icon
            @click="cancel"
            type="ios-arrow-left"
            size="24"
            fill="#fff"
          ></x-icon>
          <div class="inputBox">
            <input
              type="text"
              class="searchFun"
              v-model="userContent"
              placeholder="搜索"
            />
            <!-- <span class="searchPic" @click="getUserData"></span> -->
          </div>
          <div class="searchBtn" @click="getPeople">搜索</div>
        </div>
        <div class="division"></div>
        <ul id="demo">
          <li v-for="(item, index) in searchList" :key="index" class="userList">
            <span class="userListContent">
              {{ item.name }}
               <!-- - {{ item.location }} -->
            </span>
            <input
              class="selecet_depart"
              name="department"
              type="radio"
              :value="item.id"
              @click="getSelectData(item)"
            />
          </li>
          <li v-if="!searchList.length" class="userList" style="text-align: center;"><span style="color:gray;">暂无负责人</span></li>
        </ul>
      </div>
      <div class="footer" v-if="show">
        <div class="btn" @click="cancel()">取消</div>
        <div class="btn" @click="confirm()">完成</div>
      </div>
    </popup>
  </div>
</template>
<script>
import { Popup } from "vux";
import TaskDao from "@/daos/task_dao";
export default {
  name: "organization",
  components: {
    Popup
  },
  props: {
    peopleId: {
      type: String,
      default: ""
    },
    leader: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    peopleData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data: function() {
    return {
      show: false,
      //   peopleData: [], //所有处理人
      userContent: "", //用户输入的内容
      departPeople: {}
    };
  },
  //   watch: {
  //     peopleId: function(newQuestion, oldQuestion) {
  //       if (newQuestion) {
  //         this.getPeople();
  //       }
  //     }
  //   },
  computed: {
    defaultPeople() {
      if (!this.leader) {
        return "";
      }
      let res = this.peopleData.find(e => e.id === this.leader);
      return res ? res.name : "";
    },

    searchList() {
      let arr = [];
      arr = this.peopleData.filter(e => {
        if (this.userContent) {
          return e.name.includes(this.userContent);
        } else {
          return true;
        }
      });
      return arr;
    }
  },
  mounted() {
    // let userInfo = JSON.parse(localStorage.getItem("user"));
    // this.peopleId = userInfo.deparment.id;
    // this.getDefaultPeople();
    // if (this.peopleId) {
    // }
    // this.getPeople();
    // console.log(this.peopleId);
  },
  methods: {
    // getDefaultPeople: function() {
    //   TaskDao.getDefaultPeopleByDepartment(this.peopleId, data => {
    //     if (data) {
    //       this.departPeople = data;
    //       this.$emit("selectPeople", this.departPeople);
    //     }
    //   });
    // },
    setDefaultPeople() {
      let res = this.peopleData.find(e => e.id === this.leader);
      //   this.departPeople = res;
    },
    getPeople() {
      // TaskDao.getDepratmentUserList(this.peopleId, data => {
      //     if(data){
      //         this.peopleData = data;
      //     }
      // });
      //   TaskDao.getDepartmentLeaders({ name: this.userContent }, data => {
      //     if (data) {
      //       this.peopleData = data;
      //     }
      //   });
    },

    // 点击搜索按钮
    getUserData() {
      this.$http(
        this.$API.getAllDevice,
        { departmentId: this.deviceId, deviceName: this.userContent },
        true
      ).then(res => {
        this.deviceData = res;
      });
    },
    // 打开选择器
    openPopup() {
      this.show = true;
      // if(this.peopleId){
      //     this.show = true;
      //     // this.getPeople();
      // }else{
      //     alert("请选择部门后，在来选择负责人！");
      //     return false;
      // }
    },
    // 单选按钮的点击事件
    getSelectData(data) {
      this.departPeople = JSON.parse(JSON.stringify(data));
    },
    // 点击完成按钮
    confirm() {
      this.show = false;
      if (this.departPeople.id) {
        this.$emit("selectPeople", this.departPeople);
      }
    },
    cancel() {
    //   this.departPeople.id = "";
    //   this.departPeople.name = "";
      this.show = false;
    }
  }
};
</script>
<style lang="less" scoped>
input {
  &::placeholder {
    color: gray !important;
  }
}
.organization .vux-popup-mask {
  display: none !important;
}
.organization {
  // position: absolute;
  // top: 45px;
  width: 100%;
  //  height: 100vh;
  // padding-left: 10%;
}
.main_wrapper {
  color: #fff;
  width: 100%;
  z-index: 999;
  font-size: 16px;
}
.header {
  //   padding: 13px 0;
  width: 100%;
  font-size: 16px;
  // line-height: 16px;
  // color:#fff;
  padding: 0 !important;
  .header-content {
    padding: 0 !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    img {
      width: 5px;
      height: 11px;
      margin-left: 15px;
    }
  }
}
.footer {
  position: fixed;
  bottom: 22px;
  right: 0;
  width: 100%;
  padding: 20px 0;
  background: #18182c;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 9999;
  .cancel,
  .btn {
    padding: 10px 5px !important;
    background: #3967dc;
    color: #ffffff;
    font-size: 16px;
    width: 145px;
    text-align: center;
    border-radius: 13px;
  }
  .cancel {
    margin-left: 3%;
  }
  .btn {
    // margin-right: 3%;
  }
}
.iconfont {
  margin-right: 10px;
  font-size: 14px;
}
.vux-popup-dialog {
  height: 100vh !important;
  top: 0;
  bottom: unset !important;
  background: #18182c !important;
  font-size: 14px;
  padding: 0 11px 0 13px;
  box-sizing: border-box;
}
.name {
  // width: 100%;
  // padding: 2px 0;
  // overflow: hidden !important;
  // text-overflow: ellipsis !important;
  // white-space: nowrap !important;
  // word-break: keep-all !important;
}
// .icon1{
//     margin-left: 5px;
// }
// .icon2{
//     margin-left: 5px;
//     transform:rotate(90deg);
//     -ms-transform:rotate(90deg); 	/* IE 9 */
//     -moz-transform:rotate(90deg); 	/* Firefox */
//     -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
//     -o-transform:rotate(90deg);
// }
.selecet_depart {
  // -webkit-appearance: none;
  // line-height: 40px;
  // position: absolute;
  // right:20px;
  // margin-top: 1.5em;
  position: absolute;
  right: 10px;
  display: inline-block;
  vertical-align: middle;
  /* 当成为行内块元素时它就可以垂直居中了 */
  width: 18px;
  height: 18px;
  -webkit-appearance: none;
  /* 清除原有的样式 */
  background-color: transparent;
  border: 0;
  outline: 0 !important;
  /* 去掉点击后外面可能会出现的蓝框 */
  line-height: 20px;
  color: #d8d8d8;
}

.selecet_depart:after {
  /* //在input的内容之后插入新内容 */
  position: absolute;
  top: 12px;
  right: 10px;
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 12px; /* no */
  font-size: 14px;
  color: #fff;
  border: 3px solid #ddd;
  background-color: #fff;
  box-sizing: border-box;
  margin-top: -13px;
  /* 规定两个并排的带边框的框 */
}

.selecet_depart:checked:after {
  /* 选中之后的样子 */
  content: "L";
  transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
  /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
        括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
  -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
  border-color: #456de6;
  background-color: #456de6;
  position: absolute;
  right: 10px;
}

/********************列表的样式********************/
#demo {
  position: absolute;
  top: 69px;
  right: 0;
  bottom: 90px;
  left: 0;
  overflow-y: scroll;
  padding: 0 23px;
  box-sizing: border-box;
  z-index: 999;
  .userList {
    padding: 10px 0;
    border-bottom: 1px solid #434358;
    // overflow: hidden;
    .userListContent {
      display: inline-block;
      width: 80%;
      text-align: left;
      // float: left;
    }
  }
}

// 搜索
.search {
  width: 100%;
  height: 50px;
  padding: 8px;
  box-sizing: border-box;
  background-color: #18182c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .inputBox {
    width: 70%;
    height: 100%;
    margin: 0 auto;
    background-color: #11111f;
    padding: 0 8px;
    box-sizing: border-box;
    .searchFun {
      width: 90%;
      height: 100%;
      border: none;
      outline: none;
      font-size: 15px;
      color: #ffffff;
    }
    .searchPic {
      float: right;
      width: 10%;
      height: 100%;
    }
  }
}

// 分割线
.division {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #22233f;
  margin-bottom: 10px;
}

// 搜索框placeholder
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #fff;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #fff;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #fff;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #fff;
}
</style>
